<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>

<body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 PATCH 请求</button>
    <button>点击发送 DELETE 请求</button>
    <script>
        //获取所有的按钮
        let btns = document.querySelectorAll('button');

        //第一个按钮
        btns[0].addEventListener('click', async function () {
            // 函数   配置对象
            // then 方法
            // axios({
            //     //请求方法
            //     method: 'get',
            //     //请求 URL
            //     url: 'http://127.0.0.1:3000/song'
            // }).then(response => {
            //     console.log(response);
            // }).catch(reason => {
            //     console.warn(reason);
            // })

            try {
                // async 和 await
                let res = await axios({
                    //请求方法
                    method: 'get',
                    //请求 URL
                    url: 'http://localhost:3000/song',
                    //设置 query 参数
                    params: {
                        q: '周'
                    },
                    //设置请求头
                    headers: {
                        a: 100 //encodeURI decodeURI
                    }
                });
                console.log(res);
            } catch (e) {
                console.log(e);
            }
        });

        //第二个按钮
        btns[1].addEventListener('click', async function () {
            let result = await axios({
                method: 'post',
                url: 'http://127.0.0.1:3000/song',
                //设置请求体
                // JSON  
                data: {
                    name: '你太美',
                    singer: '爱坤'
                }
                // querystring
                // data: 'name=这一首简单的歌&singer=王力宏'
            });

            console.log(result);
        });

        //第三个按钮
        btns[2].addEventListener('click', async function () {

            let result = await axios({
                method: 'put',
                url: 'http://127.0.0.1:3000/song/13',
                //设置请求体
                data: {
                    name: '鸡你太美'
                }
            });

            console.log(result);

        });

        //第四个按钮
        btns[3].addEventListener('click', async function () {
            let result = await axios({
                method: 'patch',
                url: 'http://127.0.0.1:3000/song/12',
                //设置请求体
                data: {
                    name: '鸡你太美'
                }
            });
            console.log(result);
        });

        //第五个按钮
        btns[4].addEventListener('click', async function () {
            let result = await axios({
                method: 'delete',
                url: 'http://127.0.0.1:3000/song/13',
            });
            console.log(result);
        });

    </script>
</body>

</html>